<template>
	<div class="Header">
		<header>
			<div><span class="leftBack" @click="leftBack"></span></div>
			<span>{{$route.query.text}}</span>
			<span></span>
		</header>
		<div class="Header_a">
			<router-view></router-view>
		</div>
	</div>
</template>
<script>
	import { mapState } from 'vuex';
	export default {
		name: "Header",
		data() {
			return {

			}
		},
		computed: {
			...mapState(["musicList"])
		},
		methods: {
			leftBack() {
				if(window.history.length >= 1) {
					this.$router.go(-1);
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	.Header {
		width: 100%;
		height: 100%;
		font-size: 16px;
		display: flex;
		flex-direction: column;
		header {
			width: 100%;
			height: 45px;
			padding: 0 16px;
			box-sizing: border-box;
			display: flex;
			border-bottom: 1px solid #EDEDED;
			justify-content: space-between;
			align-items: center;
			font-size: 16px;
			.leftBack {
				width: 12px;
				height: 12px;
				display: inline-block;
				border-top: 3px solid #000;
				border-right: 3px solid #000;
				transform: rotate(-135deg);
			}
		}
		.Header_a {
			width: 100%;
			flex: 1;
		}
	}
</style>